@import "../../Master/index";

.closed {
  position: absolute;
  top: .3rem;
  right: .6rem;
  i {
    font-size: 1.3rem;
    color: @Master80;
  }
}

.popup-content {
  height: 100%;
  .head {
    width: 100%;
    height: 8rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: transparent;
    position: relative;
    img {
      width: 15rem;
      position: absolute;
      left: 50%;
      margin-left: -7.5rem;
      bottom: -7.5rem;
      z-index: 3500;
      display: block;
      animation: spin 1s;
      -webkit-animation: spin 1s;
      animation-fill-mode: forwards;
      transform: rotate(0deg);
    }
    .bgd {
      width: 20rem;
      height: 20rem;
      //background: url("~@/../../../img/PunchCard/xing.gif") no-repeat;
      background-size: 100%;
      position: absolute;
      left: 50%;
      bottom: -13rem;
      margin-left: -10rem;
      z-index: 3550;
      animation: contes .7s;
      -webkit-animation: contes .7s;
      animation-fill-mode: forwards;
    }
    .Yellowbg {
      position: absolute;
      left: 50%;
      bottom: -0rem;
      z-index: 4000;
      width: 6rem;
      height: 6rem;
      margin-left: -3rem;
      margin-bottom: -3rem;
      border-radius: 100%;
      box-sizing: border-box;
      border: .4rem solid #fff;
      background-image: linear-gradient(to bottom, #ffea00, #ffd000);
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        background: url("../../../img/PunchCard/true.gif") no-repeat;
        background-size: 100%;
        /*border: .3rem solid #fff;*/
        /*border-top-width: 0;*/
        /*border-right-width: 0;*/
        /*-webkit-transform: rotate(-45deg);*/
        /*animation-delay: .9s;*/
        /*animation: conte .1s ;*/
        /*-webkit-animation: conte .1s ;*/
        /*animation-fill-mode: forwards;*/
      }
    }
  }
  .body {
    background-color: #fff;
    border-radius: .8rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
    position: relative;
    z-index: 3540;
    .title {
      font-size: 1.8rem;
      margin-top: 2rem;
      color: @Master27;
    }
    .content {
      margin: auto;
      margin-top: 1rem;
      width: 80%;
      font-size: 1.5rem;
      text-align: left;
      color: @Master62;
    }
    .btns {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0rem 2rem;
      margin-top: 2rem;
    }
  }
}

@keyframes conte {
  0% {
    width: 2.2rem;
    height: 1.2rem;
  }
  100% {
    width: 2rem;
    height: 1rem;
  }
}

@keyframes contes {
  0% {
    opacity: 4;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes contebg {
  0% {
    width: 3rem;
    height: 3rem;
    margin-left: -1rem;
  }
  100% {
    width: 0rem;
    height: 0rem;
    margin-left: 2.5rem;
  }
}

@keyframes spin {
  0% {
    transform: rotate(90deg);
    opacity: 1;
  }
  80% {
    transform: rotate(0deg);
    display: none;
  }
  100% {
    opacity: 0;
  }
}
